<template>
  <div class="logo">
    <el-menu default-active="2" :collapse="props.isCollapse" :collapse-transition="false" @open="handleOpen"
      @close="handleClose" background-color="#ebf1f5" text-color="#606266" active-text-color="#2F74FF" class="menu"
      router>
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>用户登录</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/manage/login">登录</el-menu-item>
          <el-menu-item index="/manage/sign">注册</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group Two">
          <el-menu-item index="/manage/BillingSystem">账户界面</el-menu-item>
          <el-menu-item index="/manage/PersonalInformation">个人信息界面</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title><span>item four</span></template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="/manage/shoplist">
        <el-icon><icon-menu /></el-icon>
        <template #title>店铺列表</template>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>用户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/manage/shoppingcart">购物车</el-menu-item>
          <el-menu-item index="/manage/ordersmanage">订单管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>商户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/manage/addshop">商户开店</el-menu-item>
          <el-menu-item index="/manage/CommodityManage">商品管理</el-menu-item>
          <el-menu-item index="/manage/UpdateCommodity">上架商品</el-menu-item>
          <el-menu-item index="/manage/TradingVolume">流水管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>管理员</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/manage/ShopApproval">开店审批</el-menu-item>
          <el-menu-item index="/manage/commodityApproval">商品审批</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const props = defineProps(['isCollapse'])
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.logo {
  height: 80px;
  background: #e1eaf4;
}

.menu {
  min-height: calc(100vh - 80px);

}
</style>